import React,{useState} from 'react'
import './ly.css'
import { Form,Button, Table, Modal ,Drawer,Space,Tabs,Popover, Steps,Input } from 'antd';
import {FormOutlined,DeleteOutlined} from '@ant-design/icons';

export default function LY() {
  const items = [
    {
      key: '1',
      label: '基础信息',
      children: <ul>
        <li>
          <p>所属项目</p>
          <p>北京国贸项目</p>
        </li>
        <li>
          <p>所属项目</p>
          <p>北京市朝阳区长安街20号国贸大厦</p>
        </li>
        <li>
          <p>所属项目</p>
          <p style={{fontSize:"14px"}}>国贸大厦与国贸展览中心、国贸商城、中国大饭店及国贸饭店、国贸公寓共同构成总建筑面积达五十
六万平方米的中国国际贸易中心。卓越的办公环境、先进的科技设施、完善的配套服务、优越的商业
氛围以及丰富的物业管理经验，令国贸写字楼成为众多国内外客户理所当然的至优之选。全球财富50
0强中的多家企业均落定其间，图划伟业。</p>
        </li>
        <li>
          <p>所属项目</p>
          <p style={{fontSize:"14px"}}>国贸大厦与国贸展览中心、国贸商城、中国大饭店及国贸饭店、国贸公寓共同构成总建筑面积达五十
六万平方米的中国国际贸易中心。</p>
        </li>
      </ul>,
    },
    {
      key: '2',
      label: '楼层',
      children: 
      <div className='xin3'>
        <p>地上5层，地下2层</p>
        <div className='xin3a'>
          <ul>
            <li>
              <p>地上</p>
              <p><span>1</span>层</p>
            </li> 
            <li>
              <p>地上</p>
              <p><span>2</span>层</p>
            </li> 
            <li>
              <p>地上</p>
              <p><span>3</span>层</p>
            </li> 
            <li>
              <p>地上</p>
              <p><span>4</span>层</p>
            </li> 
            <li>
              <p>地上</p>
              <p><span>5</span>层</p>
            </li> 
          </ul>
          <ul>
            <li>
              <p>地下</p>
              <p><span>1</span>层</p>
            </li> 
            <li>
              <p>地下</p>
              <p><span>2</span>层</p>
            </li> 
          </ul>
        </div>
      </div>
    }
  ];
  const col = [
    {
      title: '名称',
      dataIndex: 'name',
      render(_,record){
        return <div className='cen1'>
          <img src={require('../../../static/images/37.png')} alt="" />
          <span>国贸一期</span>
        </div>
      },
      align:'center'
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      align:'center'
    },
    {
      title: '操作',
      dataIndex: 'action',
      render(_,record){
        return <div>
          <FormOutlined style={{paddingRight:'20px',color:'#8876EA'}} 
          onClick={showDrawer}
          />
          <DeleteOutlined style={{color:'#F97171'}} onClick={showModal}/>
        </div>
      },
      align:'center'
      
    },
];
  const data = [];
for (let i = 0; i < 5; i++) {
    data.push({
        key: i,
        name: `国贸一期`,
        address: `北京朝阳区建国门外大街1号国贸商城`,
    });
}
  // 删除
    const [open, setOpen] = useState(false);
    const [modalText, setModalText] = useState('您确定要执行此操作吗？');
    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        setModalText();
        setOpen(false);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setOpen(false);
    };

    // 编辑
    const [pen, setPen] = useState(false);
    const showDrawer = () => {
        setPen(true);
    };
    const onClose = () => {
        setPen(false);
    };

    // 新建楼宇的弹框
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    const showModal1 = () => {
      setIsModalOpen1(true);
    };
    const handleOk1 = () => {
      setIsModalOpen1(false);
    };
    const handleCancel1 = () => {
      setIsModalOpen1(false);
    };

    // 步骤条
    const customDot = (dot, { status, index }) => (
      <Popover
        content={
          <span>
            step {index} status: {status}
          </span>
        }
      >
        {dot}
      </Popover>
    );
    const description = 'You can hover on the dot.';

    // 表单
    const MyFormItemContext = React.createContext([]);
    function toArr(str) {
      return Array.isArray(str) ? str : [str];
    }
    const MyFormItemGroup = ({ prefix, children }) => {
      const prefixPath = React.useContext(MyFormItemContext);
      const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);
      return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;
    };
    const MyFormItem = ({ name, ...props }) => {
      const prefixPath = React.useContext(MyFormItemContext);
      const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;
      return <Form.Item name={concatName} {...props} />;
    };
    const onFinish = (value) => {
      console.log(value);
    };

  return (
    <>
    <div>
      <button className='btn' onClick={showModal1}>新建楼宇</button>
      <Modal title="楼宇新建" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1} width={560}>
        <Steps
          current={0} 
          progressDot={customDot}
          items={[
            {
              title: '基础信息',
            },
            {
              title: '楼宇图片',
            },
            {
              title: '楼层',
            },
            
          ]}
        />
        <Form name="form_item_path" layout="vertical" onFinish={onFinish}>
          <MyFormItemGroup prefix={['user']}>
            <MyFormItemGroup prefix={['name']}>
              <MyFormItem name="楼宇名称" label="楼宇名称">
                <Input />
              </MyFormItem>
              <MyFormItem name="楼宇名称" label="楼宇名称">
                <Input />
              </MyFormItem>
            </MyFormItemGroup>

            <MyFormItem name="楼宇简介" label="楼宇简介">
              <Input />
            </MyFormItem>
            <MyFormItem name="运营方简介" label="运营方简介">
              <Input />
            </MyFormItem>
          </MyFormItemGroup>

        </Form>
      </Modal>
      <div className='search'>
        <input type="text" placeholder='请输入楼宇名称' />
        <button className='btn'>查询</button>
        <button className='btn2'>重置</button>
      </div>
      <div className='table'>
        <div>
          <Table columns={col} dataSource={data} className="biao" />
          <Modal
                    title="此操作是不可恢复的！"
                    open={open}
                    onOk={handleOk}
                    onCancel={handleCancel}
                >
                    <p>{modalText}</p>
                </Modal>
                <Drawer title="北京国贸一期A座" className='xin' onClose={onClose} open={pen} extra={
                  <Space className='xin1'>
                      <span onClick={onClose}>编辑</span>
                      <span style={{color:"#F97171"}} onClick={onClose}>删除</span>
                  </Space>
                }>
                     <Tabs className='xin2' defaultActiveKey="1" items={items} onChange={(key)=>{console.log(key);}} />
                </Drawer>
        </div>
      </div>
    </div>
    </>
  )
}
